<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX概念和axios使用</title>
</head>

<body>
    <input type="text" class="pname" placeholder="输入如：广东省">
    <input type="text" class="cname" placeholder="输入如：深圳市">
    <button class="query">查询地区</button>
    <p class="my-p"></p>
    <script src="./axios.js"></script>

    <script>


        // 1.注册点击事件
        document.querySelector('.query').addEventListener('click', function () {
            // 2.找对象
            let pname = document.querySelector('.pname').value
            let cname = document.querySelector('.cname').value
            // 3.发送请求
            axios({
                url: 'https://hmajax.itheima.net/api/area',
                params: {
                    pname,
                    cname
                }
            })
                .then(res => {
                    // console.log(res.data)

                    document.querySelector('.my-p').innerHTML = res.data.list.join('<br>')
                })
        })

    </script>
</body>

</html>